<!--
 * @author: Kate-sy
 * @create: 2021-06-24 16:58 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-24 17:30 PM
 * @desc: 热门文章
-->
<template>
  <div class="hotar-contaner">
    <div class="hotar-top">热门文章</div>
    <div class="hotar-item" :key="item.title" v-for="item in hotdata">
      <div class="hot-title">{{ item.title }}</div>
      <div class="icon">
        <div class="zan">
          <img
            src="	https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/e9d76988a7ae3392dc967cfbb64cd887.svg"
            alt=""
          /><span>{{ item.zan }}</span>
        </div>
        <div class="hot-pl">
          <img
            src="	https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/a7c834156615ecc0b2e96d6329606026.svg"
            alt=""
          />
          <span>{{ item.pl }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Hotarticle",
  data() {
    return {
      hotdata: [
        {
          title: "java主题月|掘金密卷之java月考",
          zan: "0",
          pl: "0",
        },
        {
          title: "中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂（上）",
          zan: "5656",
          pl: "21",
        },
        {
          title: "【1月最新】前端100问：能搞懂80%的请把简历给我",
          zan: "57",
          pl: "89",
        },
        {
          title:
            "30道Vue面试题，内容详细讲解（涵盖入门到精通，自测Vue掌握程度）",
          zan: "5674",
          pl: "53",
        },
        {
          title: "一个合格(优秀)的前端都应该阅读这些文章",
          zan: "57",
          pl: "89",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.hotar-contaner {
  margin-top: 18px;
  padding-bottom: 5px;
  background-color: #fff;
  box-shadow: 0 4px 3px -3px #eee;
  .hotar-top {
    padding: 13px 16px;
    @include font(15px, #2e3135, 550);
    border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
  }
  .hotar-item {
    width: 268px;
    margin: auto;
    padding: 10px 0 0 0;
    margin-bottom: 5px;
    .hot-title {
      margin-bottom: 5px;
      @include font(14px, #333);
      @include hidden(2);
    }
    .icon {
      display: flex;
      @include font(14px, #909090);
      .zan {
        @include flex(none, center);
        margin-right: 22px;
        img {
          margin-right: 7px;
        }
      }
      .hot-pl {
        @include flex(none, center);
        img {
          margin-right: 7px;
        }
      }
    }
  }
}
</style>